import React,{Component} from 'react';
import echarts from 'echarts';
import {Button,Radio,Form} from 'antd';
import InnerForm from '../DBTable/InnerForm';

class Charts extends Component{
    constructor(){
        super();
        this.state={
            data:[],
            size: ''
        }
    }
    getConfig(config){
        const echartName = this.props.route.echartsName;
        let charts = null;
        try{
            charts = require(`../../echarts/${echartName}/${config}.js`);
            return charts;
        }catch(err){
            console.log(err)
        }       
    }
    componentWillMount(){
        const {data}=this.state;
        this.charts = this.getConfig("charts");
        this.charts.map((chart)=>{
            data.push({id:chart.id,key:chart.key})
            if(chart.check){
                this.setState({
                    size:chart.label
                })
            }              
        })
        this.querySchema = this.getConfig("formquery");
        this.tableConfig = this.getConfig("config");
        this.buttons = this.getConfig("button");
        
    }
    componentDidMount(){ 
       const {data}=this.state;
       let div = null;
       const innerChart = this.innerChart();
     
       innerChart.forEach((res,i)=>{
           data[i].data=res;
       })
       this.getCharts(data);
    }
    getInnerForm() {
        let form = null;
        if (this.tableConfig.showQueryFrom) {
        if (this.InnerNewFrom == null) {
            this.InnerNewFrom = Form.create({ onFieldsChange: this.getFormData })(InnerForm);
        }
        const InnerNewFrom = this.InnerNewFrom;
        form = (<InnerNewFrom ref="getInnerFormData" parentHandleSubmit={this.handleFormSubmit} schema={this.querySchema} tableConfig={this.tableConfig} />);
        }
        return form;
    }

    getFormData = (props, fields) => {
        let myInnerForm = this.refs.getInnerFormData;
        let oldObj = myInnerForm.getFieldsValue();
        let newObj = {};
        for (const key in oldObj) {
        if (oldObj[key]) {
            if (oldObj[key] instanceof Object) {
            newObj[key] = oldObj[key].format('YYYY-MM-DD');
            } else {
            newObj[key] = oldObj[key];
            }
        }
        }

        this.setState({ query: newObj });
    }
    refresh(){   
        let div = null,{data}=this.state,show="";
        div=this.charts.map((chart)=>{
            return (<div id={chart.id} key={chart.key} style={{height:chart.height,border:"1px solid #000",width:chart.width,float:"left",marginRight:chart.right,marginBottom:chart.bottom}}></div>)
        })
        return div;
    }
    handleChange = (e) => {
       const {data}=this.state;
       this.setState({ size: e.target.value });
       let changeChart = [
           {
            key:"123",
            title: {
                text: '未来一周气温变化',
                subtext: '纯属虚构'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['最高气温','最低气温']
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']},
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis:  {
                type: 'category',
                boundaryGap: false,
                data: ['周一','周二','周三','周四','周五','周六','周日']
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} °C'
                }
            },
            series: [
                {
                    name:'最高气温',
                    type:'line',
                    data:[11, 11, 15, 13, 12, 13, 10],
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    }
                },
                {
                    name:'最低气温',
                    type:'line',
                    data:[1, -2, 2, 5, 3, 2, 0],
                    markPoint: {
                        data: [
                            {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'},
                            [{
                                symbol: 'none',
                                x: '90%',
                                yAxis: 'max'
                            }, {
                                symbol: 'circle',
                                label: {
                                    normal: {
                                        position: 'start',
                                        formatter: '最大值'
                                    }
                                },
                                type: 'max',
                                name: '最高点'
                            }]
                        ]
                    }
                }
            ]
        }
       ]
       changeChart.forEach((res,i)=>{
           data[i].data=res;
       })
       console.log(data)
       this.getCharts(data);
    }
    getButton(){
        const echartName = this.props.route.echartsName;
        const {size }=this.state;
        let button = null;
        try{
            this.button = require(`../../echarts/${echartName}/button.js`);
            button=this.button.map((chart)=>{
                return (<Radio.Button key={chart.key} value={chart.label}>{chart.label}</Radio.Button>)
            })
            return (
                <Radio.Group value={size} style={{marginTop:5,marginBottom:10}} onChange={this.handleChange} style={{width:"100%",margin:10}}>
                    {button}
                </Radio.Group>
            );
        }catch(err){
            console.log(err)
        }       
    }
    innerChart(){
        let innerChart=[],left;
        this.charts.map((chart)=>{
            if(chart.left)
                left = chart.left
            else
                left = "center"           
            switch(chart.type){
                case "bar":
                    innerChart.push({
                        title : {
                            text: chart.title
                        },
                        tooltip : {
                            trigger: 'axis'
                        },
                        legend: {
                            data:['蒸发量','降水量']
                        },
                        toolbox: {
                            show : true,
                            feature : {
                                dataView : {show: true, readOnly: false},
                                magicType : {show: true, type: ['line', 'bar']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        calculable : true,
                        xAxis : [
                            {
                                type : 'category',
                                data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        series : [
                            {
                                name:'蒸发量',
                                type:'bar',
                                data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                                markPoint : {
                                    data : [
                                        {type : 'max', name: '最大值'},
                                        {type : 'min', name: '最小值'}
                                    ]
                                },
                                markLine : {
                                    data : [
                                        {type : 'average', name: '平均值'}
                                    ]
                                }
                            },
                            {
                                name:'降水量',
                                type:'bar',
                                data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                                markPoint : {
                                    data : [
                                        {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
                                        {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                                    ]
                                },
                                markLine : {
                                    data : [
                                        {type : 'average', name : '平均值'}
                                    ]
                                }
                            }
                        ]
                    })
                    break;
                case "line": 
                    innerChart.push({
                        title: {
                            text: chart.title
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data:['最高气温','最低气温']
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                dataZoom: {
                                    yAxisIndex: 'none'
                                },
                                dataView: {readOnly: false},
                                magicType: {type: ['line', 'bar']},
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        xAxis:  {
                            type: 'category',
                            boundaryGap: false,
                            data: ['周一','周二','周三','周四','周五','周六','周日']
                        },
                        yAxis: {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value} °C'
                            }
                        },
                        series: [
                            {
                                name:'最高气温',
                                type:'line',
                                data:[11, 11, 15, 13, 12, 13, 10],
                                markPoint: {
                                    data: [
                                        {type: 'max', name: '最大值'},
                                        {type: 'min', name: '最小值'}
                                    ]
                                },
                                markLine: {
                                    data: [
                                        {type: 'average', name: '平均值'}
                                    ]
                                }
                            },
                            {
                                name:'最低气温',
                                type:'line',
                                data:[1, -2, 2, 5, 3, 2, 0],
                                markPoint: {
                                    data: [
                                        {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                                    ]
                                },
                                markLine: {
                                    data: [
                                        {type: 'average', name: '平均值'},
                                        [{
                                            symbol: 'none',
                                            x: '90%',
                                            yAxis: 'max'
                                        }, {
                                            symbol: 'circle',
                                            label: {
                                                normal: {
                                                    position: 'start',
                                                    formatter: '最大值'
                                                }
                                            },
                                            type: 'max',
                                            name: '最高点'
                                        }]
                                    ]
                                }
                            }
                        ]
                    })
                    break;
                case "pie" :
                    innerChart.push({
                    title : {
                        text: chart.title,
                        x:left
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
                    },
                    series : [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data:[
                                {value:335, name:'直接访问'},
                                {value:310, name:'邮件营销'},
                                {value:234, name:'联盟广告'},
                                {value:135, name:'视频广告'},
                                {value:1548, name:'搜索引擎'}
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                })
                    break;
                default:
                    break;
            }
        })
        return innerChart;
    }
    getCharts(chart){
        chart.map((item)=>{
            echarts.init(document.getElementById(item.id)).clear();
            echarts.init(document.getElementById(item.id)).setOption(
                item.data
            );
        })     
    }
    render(){
        return(
            <div style={{overflowX:"hidden"}}>
               {this.getInnerForm()}
               {this.getButton()}
               {this.refresh()}
            </div>
        )
    }
}

export default Charts;